<template>
  <el-dialog
    title="日志列表"
    :close-on-click-modal="false"
    :visible.sync="visible"
    width="75%"
  >
    <!-- 搜索 -->
    <el-form :inline="true" :model="dataForm">
      <el-form-item>
        <el-input
          v-model="dataForm.beanName"
          placeholder="bean名称"
          clearable
        ></el-input>
      </el-form-item>
      <el-form-item>
        <el-date-picker
          v-model="dataForm.createTime"
          type="daterange"
          unlink-panels
          range-separator=":"
          start-placeholder="开始日期"
          end-placeholder="结束日期"
          :picker-options="pickerOptions"
        >
        </el-date-picker>
      </el-form-item>
      <el-form-item>
        <el-select v-model="dataForm.status" placeholder="日志状态" clearable>
          <el-option
            v-for="item in enabledTypeOptions"
            :key="item.key"
            :label="item.display_name"
            :value="item.key"
          />
        </el-select>
      </el-form-item>
      <el-form-item>
        <el-button type="success" @click="getDataList()">搜索</el-button>
      </el-form-item>
      <!-- 导出 -->
      <el-form-item>
        <el-button v-if="isAuth('tools:quartz:log:export')" type="warning" @click="downloadMethod()">导出</el-button>
      </el-form-item>
    </el-form>

    <!--表格渲染-->
    <el-table v-loading="dataListLoading" :data="dataList" style="width: 100%">
      <el-table-column
        :show-overflow-tooltip="true"
        prop="jobId"
        label="任务Id"
      />
      <el-table-column
        :show-overflow-tooltip="true"
        prop="beanName"
        label="Bean名称"
      />
      <el-table-column
        :show-overflow-tooltip="true"
        prop="params"
        label="参数"
      />
      <el-table-column align="center" prop="status" label="状态">
        <template slot-scope="scope">
          <el-tag :type="scope.row.status == 0 ? 'success' : 'danger'">{{
            scope.row.status == 0 ? "成功" : "失败"
          }}</el-tag>
        </template>
      </el-table-column>

      <el-table-column
        :show-overflow-tooltip="true"
        prop="times"
        label="耗时(毫秒)"
      />
      <el-table-column prop="error" label="失败详情">
        <template slot-scope="scope">
          <el-button
            v-show="scope.row.error"
            size="mini"
            type="text"
            @click="showErrorInfo(scope.row.logId)"
            >查看详情</el-button>
        </template>
      </el-table-column>
      <el-table-column
        :show-overflow-tooltip="true"
        prop="createTime"
        label="创建日期"
      >
      </el-table-column>
    </el-table>

    <el-dialog :visible.sync="errorDialog" append-to-body title="异常详情" width="85%">
      <pre v-highlightjs="errorInfo"><code class="java" /></pre>
    </el-dialog>
    <!--分页组件-->
    <el-pagination
      @size-change="sizeChangeHandle"
      @current-change="currentChangeHandle"
      :current-page="pageIndex"
      :page-sizes="[10, 20, 50, 100]"
      :page-size="pageSize"
      :total="totalPage"
      layout="total, sizes, prev, pager, next, jumper"
    >
    </el-pagination>
  </el-dialog>
</template>

<script>
import { parseTime, downloadFile } from '@/utils'
export default {
  data() {
    return {
      pickerOptions: {
        shortcuts: [{
          text: '今天',
          onClick(picker) {
            const start = new Date();
            const end = new Date();
            end.setTime(end.getTime() + 3600 * 1000 * 24);
            picker.$emit('pick', [start, end]);
          }
        }, {
          text: '最近一个月',
          onClick(picker) {
            const end = new Date();
            const start = new Date();
            start.setTime(start.getTime() - 3600 * 1000 * 24 * 30);
            picker.$emit('pick', [start, end]);
          }
        }]
      },
      visible: false,
      dataListLoading: false,
      errorDialog: false,
      dataList: [],
      pageIndex: 1,
      pageSize: 10,
      totalPage: 0,
      dataForm: {
        beanName: '',
        createTime: [],
        status: '',
      },
      errorInfo: '',
      errorDialog: false,
      enabledTypeOptions: [
        { key: '0', display_name: '成功' },
        { key: '1', display_name: '失败' }
      ]
    }
  },
  methods: {
    init() {
      this.visible = true
      this.getDataList();
    },
    // 每页数
    sizeChangeHandle(val) {
      this.pageSize = val
      this.pageIndex = 1
      this.getDataList()
    },
    // 当前页
    currentChangeHandle(val) {
      this.pageIndex = val
      this.getDataList()
    },
    getDataList() {
      this.dataListLoading = true
      this.$http({
        url: this.$http.adornUrl('/tools/quartz-log/list'),
        method: 'get',
        params: this.$http.adornParams({
          'page': this.pageIndex,
          'limit': this.pageSize,
          'beanName': this.dataForm.beanName,
          'createTime': this.dataForm.createTime ? parseTime(this.dataForm.createTime[0], '{y}-{m}-{d}') : null,
          'endTime': this.dataForm.createTime ? parseTime(this.dataForm.createTime[1], '{y}-{m}-{d}') : null,
          'status': this.dataForm.status
        })
      }).then(({ data }) => {
        if (data && data.code === 0) {
          this.dataList = data.page.list
          //console.log(data);
          this.totalPage = data.page.totalCount
        } else {
          this.dataList = []
          this.totalPage = 0
        }
        this.dataListLoading = false
      })
    },
    //导出
    downloadMethod(){
      this.$http({
        url: this.$http.adornUrl('/tools/quartz-log/download'),
        method: 'get',
        params: this.$http.adornParams({
          'beanName': this.dataForm.beanName,
          'createTime': this.dataForm.createTime ? parseTime(this.dataForm.createTime[0], '{y}-{m}-{d}') : null,
          'endTime': this.dataForm.createTime ? parseTime(this.dataForm.createTime[1], '{y}-{m}-{d}') : null,
          'status': this.dataForm.status
        }),
        responseType: 'blob'
      }).then(function (res) {
        //console.log(res);
        downloadFile(res.data, '定时任务日志数据', 'xlsx')
      })
    },
    // 失败信息
    showErrorInfo(id) {
      this.errorDialog = true
      this.$http({
        url: this.$http.adornUrl(`/tools/quartz-log/info/${id}`),
        method: 'get',
        params: this.$http.adornParams()
      }).then(({ data }) => {
        if (data && data.code === 0) {
          //console.log(data);
          this.errorInfo = data.errDetail.error
          //this.$alert(data.log.error)
        } else {
          this.$message.error(data.msg)
        }
      })
    },

  }
}
</script>

<style scoped>
.el-dialog__body {
  padding: 0 20px 10px 20px !important;
}
</style>
